<template>
  <div class="import-page">
    <h2>数据导入</h2>
    
    <!-- 导入类型卡片 -->
    <div class="import-grid">
      <!-- 抖音已结算 -->
      <el-card class="import-card">
        <template #header>
          <div class="card-header">
            <span>抖音已结算数据</span>
            <el-tag type="success">已导入 {{ douyinSettlementCount }} 条</el-tag>
          </div>
        </template>
        <div class="upload-area">
          <el-upload
            class="upload-demo"
            drag
            action="#"
            :auto-upload="false"
            :on-change="(file) => handleFileChange(file, 'douyin-settlement')"
            accept=".csv,.xlsx,.xls"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持 CSV、Excel 格式，文件大小不超过 10MB
              </div>
            </template>
          </el-upload>
        </div>
      </el-card>

      <!-- 抖音待结算 -->
      <el-card class="import-card">
        <template #header>
          <div class="card-header">
            <span>抖音待结算数据</span>
            <el-tag type="warning">已导入 {{ douyinPendingCount }} 条</el-tag>
          </div>
        </template>
        <div class="upload-area">
          <el-upload
            class="upload-demo"
            drag
            action="#"
            :auto-upload="false"
            :on-change="(file) => handleFileChange(file, 'douyin-pending')"
            accept=".csv,.xlsx,.xls"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持 CSV、Excel 格式，文件大小不超过 10MB
              </div>
            </template>
          </el-upload>
        </div>
      </el-card>

      <!-- 抖音保险 -->
      <el-card class="import-card">
        <template #header>
          <div class="card-header">
            <span>抖音保险数据</span>
            <el-tag type="info">已导入 {{ douyinInsuranceCount }} 条</el-tag>
          </div>
        </template>
        <div class="upload-area">
          <el-upload
            class="upload-demo"
            drag
            action="#"
            :auto-upload="false"
            :on-change="(file) => handleFileChange(file, 'douyin-insurance')"
            accept=".csv,.xlsx,.xls"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持 CSV、Excel 格式，文件大小不超过 10MB
              </div>
            </template>
          </el-upload>
        </div>
      </el-card>

      <!-- 阿里采购 -->
      <el-card class="import-card">
        <template #header>
          <div class="card-header">
            <span>阿里采购订单</span>
            <el-tag type="primary">已导入 {{ aliPurchaseCount }} 条</el-tag>
          </div>
        </template>
        <div class="upload-area">
          <el-upload
            class="upload-demo"
            drag
            action="#"
            :auto-upload="false"
            :on-change="(file) => handleFileChange(file, 'ali-purchase')"
            accept=".csv,.xlsx,.xls"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持 CSV、Excel 格式，文件大小不超过 10MB
              </div>
            </template>
          </el-upload>
        </div>
      </el-card>
    </div>

    <!-- 导入日志 -->
    <el-card class="log-card">
      <template #header>
        <span>导入日志</span>
        <el-button type="primary" size="small" @click="refreshLogs">刷新</el-button>
      </template>
      <el-table :data="importLogs" style="width: 100%">
        <el-table-column prop="type" label="类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getLogTypeColor(row.type)">{{ row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="filename" label="文件名" width="200" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'success' ? 'success' : 'danger'">
              {{ row.status === 'success' ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="总数" width="80" />
        <el-table-column prop="success" label="成功" width="80" />
        <el-table-column prop="failed" label="失败" width="80" />
        <el-table-column prop="message" label="消息" />
        <el-table-column prop="created_at" label="时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.created_at) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

// 导入数量统计
const douyinSettlementCount = ref(1234)
const douyinPendingCount = ref(567)
const douyinInsuranceCount = ref(89)
const aliPurchaseCount = ref(456)

// 导入日志
const importLogs = ref([
  {
    type: '抖音已结算',
    filename: '抖音已结算.csv',
    status: 'success',
    total: 100,
    success: 98,
    failed: 2,
    message: '导入成功',
    created_at: '2024-01-01 10:00:00'
  },
  {
    type: '抖音待结算',
    filename: '抖音待结算.csv',
    status: 'success',
    total: 50,
    success: 50,
    failed: 0,
    message: '导入成功',
    created_at: '2024-01-01 09:30:00'
  },
  {
    type: '抖音保险',
    filename: '抖音保单明细.csv',
    status: 'failed',
    total: 20,
    success: 0,
    failed: 20,
    message: '文件格式错误',
    created_at: '2024-01-01 09:00:00'
  }
])

// 处理文件上传
const handleFileChange = (file: any, type: string) => {
  console.log('文件上传:', file, type)
  
  // 模拟上传处理
  setTimeout(() => {
    ElMessage.success(`${type} 文件上传成功`)
    // TODO: 调用实际的导入API
  }, 1000)
}

// 刷新日志
const refreshLogs = () => {
  // TODO: 调用API获取最新日志
  ElMessage.success('日志已刷新')
}

// 获取日志类型颜色
const getLogTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    '抖音已结算': 'success',
    '抖音待结算': 'warning',
    '抖音保险': 'info',
    '阿里采购': 'primary'
  }
  return colorMap[type] || 'info'
}

// 格式化日期
const formatDate = (date: string) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}

onMounted(() => {
  // TODO: 加载导入统计和日志数据
})
</script>

<style scoped>
.import-page {
  padding: 20px;
}

.import-page h2 {
  margin-bottom: 20px;
  color: #333;
}

.import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.import-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.upload-area {
  padding: 20px 0;
}

.log-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.log-card :deep(.el-card__header) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 